$(function () {
    let boxPicW = Math.ceil($(".picBox").outerWidth(true)),
        lunbo = $("#lunbo"),
        posterBox = $("#posterBox"),
        aliyunUrl = "http://video.mxiaotu.com/";
    /**  如果picBox为1则可以拖拽图片位置，如果不为1则只可以轮播操作
     * pageX是鼠标点击的位置相对于浏览器左上角
     * left是定位元素（被移动元素）的left值
     * evpageX是鼠标每次移动的位置的位置相对于浏览器左上角
     * evpageX-pageX就是鼠标从点击到移动停下来的px距离，再加到被移动元素的的left值上
     */
    lunbo.on("touchstart", function (e) {
        e.stopPropagation();
        let len = $(".picBox").length;
        if (len == "1") {
            return false
        }
        let pianyiX = ""; //当前元素移动的距离
        lunbo.css({
            width: len * boxPicW + len
        })
        let pageX = e.originalEvent.changedTouches[0].pageX;
        let oneMoveDistance = ""; //一次移动的距离
        let left = parseInt($(this).css("left"));
        posterBox.unbind("touchmove").on("touchmove", function (ev) {
            e.stopPropagation();
            let evpageX = ev.originalEvent.changedTouches[0].pageX;
            oneMoveDistance = evpageX - pageX;
            pianyiX = left + oneMoveDistance;
            lunbo.css({
                left: pianyiX + "px",
            })
        }).unbind("touchend").on("touchend", function (event) {
            // console.log(pianyiX, -boxPicW * (len - 1));
            // console.log(oneMoveDistance, boxPicW / 2,-left/boxPicW);
            /**控制当到最后一张时，拖动要回到最后一张，当拖到第一张还拖咋默认回第一张 */
            e.stopPropagation();
            if (pianyiX <= -boxPicW * (len - 1)) {
                lunbo.animate({
                    left: -boxPicW * (len - 1) + "px",
                }, "fast");
                return false; //会与下面判断条件重复，所以符合了，直接结束当前代码段
            }
            if (pianyiX > 0) {
                lunbo.animate({
                    left: "0px",
                }, "fast");
                return false;
            }
            /**控制当到最后一张时，拖动要回到最后一张，当拖到第一张还拖咋默认回第一张 */
            /**控制拖动距离超过一半，自动跳到下一张，不到一半才返回到自己 */
            let num = $(e.target).parent().attr("num");
            if (-oneMoveDistance > boxPicW / 2) { //当移动大于当前元素的宽度一半时，直接轮播到下一张
                lunbo.animate({
                    left: -boxPicW * (num) + "px",
                }, "fast")
            } else if (oneMoveDistance > boxPicW / 2) {
                lunbo.animate({
                    left: -boxPicW * (num - 2) + "px",
                }, "fast")
            } else if (-oneMoveDistance < boxPicW / 2) {

                lunbo.animate({
                    left: -boxPicW * (num - 1) + "px",
                }, "fast")
            }
            /**控制拖动距离超过一半，自动跳到下一张，不到一半才返回到自己 */
        })
    })
    /** 推荐语板块的单选框
     * @creRadio ： 自定义单选框 @isChecked : 0单选未被选中 1被选中
     */
    let creRadio = $("#creRadio");
    let isChecked = creRadio.attr("isChecked");
    creRadio.click(function () {
        if (isChecked == "1") { //为true时选中，被点击要变成未选中
            creRadio.removeClass("trueStyle");
            creRadio.attr("isChecked", 0);
        } else { //没有选中点击要变成选中
            creRadio.addClass("trueStyle");
            creRadio.attr("isChecked", 1);
        }
        isChecked = creRadio.attr("isChecked");
    })
    /**
     * 遮罩层的逻辑代码
     * @backImgW @backImgH :用来确定边框 
     * @$("#getPosterImg") : 定制海报按钮，点击弹出遮罩给用户说明书
     * @mineRadio ： 自定义单选框 @checkedSty : 0单选未被选中 1被选中
     * @$("#iKnowBtn") ： 我知道了按钮 点击隐藏遮罩
     */
    $("#getPosterImg").click(function () {
        let backImgW = $(".backImg").width(),
            backImgH = $(".backImg").height(),
            backImgT = parseInt($("#posterBox").css("margin-top"));
        $(document).scrollTop(0); //将页面滚动到最上面
        $("#share").hide();
        $(this).hide();
        $("#customMadeBtns").show()
        $("#border").css({
            width: backImgW,
            height: backImgH,
            "margin-top": backImgT,
        })
        // 不再显示单选默认不选中
        mineRadio.removeClass("checkedSty").attr("isChecked", 0);
        $("#shadeCeng").show(200);
    })
    let mineRadio = $("#mineRadio");
    let checkedSty = mineRadio.attr("isChecked");
    $("#mineRadioLabel").click(function () {
        if (checkedSty == "1") { //为true时选中，被点击要变成未选中
            mineRadio.removeClass("checkedSty").attr("isChecked", 0);
        } else { //没有选中点击要变成选中
            mineRadio.addClass("checkedSty").attr("isChecked", 1);
        }
        checkedSty = mineRadio.attr("isChecked");
    })
    $("#iKnowBtn").click(function () {
        checkedSty = mineRadio.attr("isChecked"); //判断不再显示按钮是否被选中
        console.log(checkedSty);
        $("#shadeCeng").hide();
    })
    /** 上传阿里云点播
     * @createUploader : 上传函数
     * @ $('#uploadFile') ： 上传文件的input change事件
     */
    function createUploader() {
        var uploader = new AliyunUpload.Vod({
            partSize: 1048576,
            parallel: 5,
            retryCount: 3,
            retryDuration: 2,
            userId: "1932293980427449",
            // 添加文件成功
            addFileSuccess: function (uploadInfo) {
                console.log("addFileSuccess: " + uploadInfo.file.name)
            },
            // 开始上传
            onUploadstarted: function (uploadInfo) {
                console.log(uploadInfo)
                let file = uploadInfo.file;
                let data = {
                    token: "72cad336-75a5-41ab-91c6-d68975ecbe33",
                    type: file.type,
                    name: file.name,
                    title: "封面",
                    size: file.size,
                    tag: "封面"
                }
                $.ajax({
                    url: 'http://139.186.155.167/platform/upload/upload_image',
                    /*接口域名地址*/
                    type: 'post',
                    data: data,
                    success: function (res) {
                        let uploadAddress = res.data.UploadAddress
                        let uploadAuth = res.data.UploadAuth;
                        let videoId = res.data.ImageId;
                        uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                    }
                })
            },
            // 文件上传成功
            onUploadSucceed: function (uploadInfo) {
                console.log(uploadInfo);
                let file = uploadInfo.file;
                $(".backImg").attr("src", aliyunUrl + uploadInfo.object)
            },
            // 文件上传失败
            onUploadFailed: function (uploadInfo, code, message) {
                console.log(uploadInfo);
                alert("文件上传失败");
            },
            // 取消文件上传
            onUploadCanceled: function (uploadInfo, code, message) {
                console.log(uploadInfo);
                alert("取消文件上传");
            },
            // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
            onUploadProgress: function (uploadInfo, totalSize, progress) {
                console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
                var progressPercent = Math.ceil(progress * 100);
            },
            // 全部文件上传结束
            onUploadEnd: function (uploadInfo) {
                console.log("全部文件上传结束");
            }
        })
        return uploader
    }
    $('#uploadFile').on('change', function (e) {
        // 上传素材图片
        var file = e.target.files;
        console.log(file);
        if (!file) {
            alert("请先选择需要上传的文件!");
            return;
        }
        var userData = '{"Vod":{}}'
        uploader = createUploader()
        for (let i = 0; i < file.length; i++) { //添加多个视频得方法
            // console.log(file[i])
            uploader.addFile(file[i], null, null, null, userData);
        }
        uploader.startUpload();
    });
    /** 海报背景图拖拽  如果picBox为1则可以拖拽图片位置，如果不为1则只可以轮播操作
     * @epageX : 手触摸的距离左上角位置 @epageY
     * @left ： 触摸的元素的left值  
     * @top:触摸的元素的top值
     * @evpageX : 触摸移动时，其手机位置距离左上角的距离会随时变化
     */
    $(".backImg").on("touchstart", function (e) {
        e.stopPropagation()
        let len = $(".picBox").length;
        if (len != 1) {
            return false
        }
        let epageX = e.originalEvent.changedTouches[0].pageX;
        let epageY = e.originalEvent.changedTouches[0].pageY;
        let left = parseInt($(this).css("left"));
        let top = parseInt($(this).css("top"));
        $(".picBox").unbind("touchmove").on("touchmove", function (ev) {
            e.stopPropagation()
            let target=ev.target;
            if ($(target).hasClass("botPic")) {
                return false;
            }
            let evpageX = ev.originalEvent.changedTouches[0].pageX;
            let evpageY = ev.originalEvent.changedTouches[0].pageY;
            $(".backImg").css({
                left: evpageX - epageX + left + "px",
                top: evpageY - epageY + top + "px"
            })
        }).unbind("touchend").on("touchend", function (event) {
        e.stopPropagation()
        $(".picBox").unbind();
        })
    })

    /**  将多个图片组合并且截取，然后生成分享海报图片     
     *      思路通过html2canvas和canvas2Image插件,先将图片和文本组合放在包裹的元素里，然后通过h2canvas截图此元素并且会放到canvas标签里，然后通过canvas2Image将canvas元素转换成图片（格式可以是png，jpn，gif等等），图片地址是base64位
     *      难点：canvas截图图片跨域问题和图片截取范围不正确问题（原因：h2canvas插件@2020版本问题）
     *      html2canvas(element, options); // element是需要截图的元素，options为可选项，参数控制
     */
    $("#createPoster").click(function () {
        var cntElem = $('#curPost')[0];
        var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        console.log(width);
        var height = shareContent.offsetHeight; //获取dom 高度
        console.log(height);
        /** canvas配置  为了使截取的图片更清晰 */
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        var scale = 2; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        /** canvas配置 */
        var opts = {
            scale: scale, // 添加的scale 参数
            canvas: canvas, //自定义 canvas
            // logging: true, //日志开关，便于查看html2canvas的内部执行流程
            width: width, //dom 原始宽度
            height: height,
            useCORS: true // 【重要】开启跨域配置
        };
        imgtobase64(shareContent, opts);
    })
    function imgtobase64(ele, opts) {
        // ele要是dom元素
        html2canvas(ele, opts).then(function (canvas) {
            var context = canvas.getContext('2d');
            // 【重要】关闭抗锯齿
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            // 【重要】默认转化的格式为png,也可设置为其他格式
            var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
            console.log(img);
            $(".picBox").hide()
            $(img).attr("id","sharePicBox")
            $("#lunbo").append(img);
            /** 生成图片成功后 */
            $(document).scrollTop(0);  //保存成功后页面置顶
            $("#customMadeBtns").css("display","none");//分享微信按钮隐藏
            $("#share").css("display","flex");  //分享微信按钮显示
        });
    }
    /** 
     * 微信分享朋友圈/分享好友 功能
    */
});